import React from 'react';
import { View, Image, FlatList, Modal, TouchableWithoutFeedback } from 'react-native';
import PropTypes from 'prop-types';
import { Colors, Metrics } from '../theme';

export default class QiniuUpPicture extends React.Component {

    static propTypes = {
        imgUri: PropTypes.string,
        visible: PropTypes.bool,
        onClose: PropTypes.func
    }

    static defaultProps = {
        imgUri: '',
        visible: false,
        onClose: () => {}
    }

    constructor(props) {
        super(props);
        this.state = {
            visible: props.visible && props.data.length > 0
        }
    }

    UNSAFE_componentWillReceiveProps (nextProps) {
        if (nextProps.visible !== this.props.visible) {
            if (nextProps.data.length !== 0) this.setState({ visible: nextProps.visible });
        }
    }


    closeModal () {
        this.setState({ visible: false }, () => {
            this.props.onClose();
        })
    }

    render () {
        return (
                <View style={{ flex: 1, width: Metrics.screenWidth, height: Metrics.screenHeight, backgroundColor: 'black' }}>
                    {this.props.imgUri ?
                        <View style={{position: 'relative'}}>
                            <TouchableOpacity style={styles.closes} onPress={() => this.closeButtonPress(3)}>
                                <Image style={{ height: 20, width: 20 }}
                                    source={require("../../images/component/close_dise.png")}
                                />
                            </TouchableOpacity>
                            <Image resizeMode="contain" style={{ flex: 1 }} source={{ uri: this.props.imgUri }} />
                        </View>
                        :
                        <TouchableOpacity onPress={() => this.closeButtonPress(3)}>
                            <Image resizeMode="contain" style={{ width: Metrics.screenWidth, height: Metrics.screenHeight }} source={item} />
                        </TouchableOpacity>
                    }
                </View>
        )
    }
}